<template>
  <div class="upload2">
    <div class="title">
      <span>门急诊数据上报</span>
    </div>

    <div class="upload-con">
      <el-upload
          class="upload-demo"
          drag
          :action="upurl"
          multiple
          :headers="upheaders"
          :on-change="handleChange"
          :on-success="handleSuccess"
          :file-list="fileList"
          ref="upload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
      </el-upload>
      <!-- 文件列表 -->
      <div v-for="(file, index) in fileList" :key="index">
        <span style="font-size: 10px;margin-right: 12px">{{ file.name }}</span>
        <el-button @click="uploadFile(file,index)" type="success" size="mini">上传</el-button>
        <el-button @click="removeFile(index)" type="danger" size="mini">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {selectById} from "@/api/hospital";
import {insertReport} from "@/api/report"

export default {
  name: "Upload2",
  data() {
    return {
      upurl: this.$store.state.fileUploadRoad + "/file/uploadInfo/Outpatient_emergency",
      upheaders: {
        Authorization: window.localStorage.token,
      },
      fileList: [],
      hospitalName:"",
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      if (file.response.flag == true) {
        this.fileList = fileList;
        this.$store.state.mutiFile += file.response.data + " ";
        console.log("上传文件=====")
        console.log(this.$store.state.mutiFile)
        console.log("=============")

        // 获取文件名
        const fileName = file.name;

        // 获取文件大小（以字节为单位）
        const fileSize = file.size;

        // 获取文件类型
        const fileType = fileName.substring(fileName.lastIndexOf('.') + 1);

        console.log("文件名: " + fileName);
        console.log("文件大小: " + fileSize + " 字节");
        console.log("文件类型: " + fileType);
        if (fileList.length >= 1) {
          this.uploadDisabled = true;
        }
        alert(file.response.message);
      } else {
        alert(file.response.data);
      }
    },
    handleChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },
    uploadFile(file,index) {
      // 通过索引移除文件
      console.log(file.name+"  "+file.size+" "+this.$store.state.userId)
      insertReport({
        hospitalName:this.hospitalName,
        dataType: "门急诊数据",
        reporterId:this.$store.state.userId,
        fileSize: file.size,
        status: "上传成功"
      }).then((res) => {
        this.$message.success("上传门急诊数据成功")
        console.log(res.data);
      });
      this.fileList.splice(index, 1);

    },
    removeFile(index){
      this.fileList.splice(index, 1);
      this.$message.error("取消上传")
    }
  },
  created() {
    selectById({
      id: this.$store.state.userId
    }).then((res) => {
      this.hospitalName = res.data.name;
      console.log(this.hospitalName);
    });
  }
}
</script>

<style scoped>
.title {
  font-family: cursive;
  font-size: 18px; /* Adjust the font size as needed */
  text-align: center;
}

.title span {
  width: 100%;
  height: 46px;
  display: inline-block;
  float: left;
  background: url(../../assets/img/upload.png);
  line-height: 46px;
  position: center;
  z-index: 5;
}

.upload-con {
  border-radius: 10px;
  padding: 100px 25px 60px 25px;
}
</style>